<!DOCTYPE html>
<!--
DOM 0 
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .bgc{
                background: #f00;
                color: #fff;
            }
        </style>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //closest就是向上找 如果自己满足就返回
                //如果自己不满足。继续向上走
                //$("#ll").closest("ul").css("color","#ff0");
                
                //由于closest可以从自己找，所以closet非常适合做事件委派
                //$("#ll").closest("li").css("color","#ff0");
                
                /*
                 * 事件委托的原理
                 * 此时每一个事件只要被点击到，他都会冒泡到document去
                 * 所以以下事件会被处理
                 * 在处理时，判断一下该事件是否是我要处理的对象就可以

                **/
                $(document).bind("click",function(event){
                   var obj = $(event.target).closest(".ccc");
                   if((obj[0])==event.target) {
                       alert("abc");
                   }
                });
                //live 就是事件委派的方式
                //但是使用这个方式会带来如下问题
                //1.每个事件都会冒泡到document上面去：效率有问题,开销变大
                //2.使用live不支持一些特殊的事件
                //3.live方式而言，他提供了第二参数来说明绑定的上下文
                
                $("#content").append("<div class='ccc'>bbbbb</div>");
                
                function print(txt) {
                    $("#content").append(txt+"<br/>");
                }
            });
        </script>
    </head>
    <body id="body">
        <div id="content">
            <div class="ccc">aaa</div>
            <ul>
                <li>bcd</li>
                <li>
                    <ul>
                        <li>fdsafdsa</li>
                        <li id="ll">abc</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>
